<template>
	<view class="content page" :style="{'--color': color}">
		<status-bar title='充值'></status-bar>
		<view class="rechMoney">
			<view class="rechTitle">充值金额</view>
			<view class="rechNum">
				<text>￥</text><input type="digit" v-model="inputNum" @input="getRechargeAct"
					:class="inputNum != ''?'rechInput':'rechNumInput'" placeholder="请输入充值金额" />
			</view>
			<view class="rechTip" v-if="inputNum != ''">
				<image class="loadingImg" :src="staticUrl+'/images/loading.gif'" v-if="loading" mode=""></image>
				<view v-else>
					<view v-if="RechargeData.aesId != 0">
						充值<text>{{RechargeData.restrict.limit}}元</text>
						赠送<text v-if="RechargeData.type == 8">{{RechargeData.restrict.money}}元</text>
						<text v-if="RechargeData.type == 9">{{RechargeData.restrict.money}}积分</text>
						<text v-if="RechargeData.type == 10">{{RechargeData.typeTitle}}</text>
					</view>
					<view v-if="RechargeData.aesId == 0">{{RechargeData.typeTitle}}</view>
				</view>
			</view>
		</view>
		<view class="rechType rule" v-if="rechData.rechargeRule">
			<view class="rechTitle">充值规则</view>
			<mp-html :content="rechData.rechargeRule" lazy-load scroll-table selectable use-anchor show-with-animation />
		</view>
		<view class="rechType rechType1">
			<view class="rechTitle">充值方式</view>
			<view class="rechTypeList">

				<label class="radio">
					<view class="fake-radio" :class="checkedSelect == 1?'thmeBorder thmeBg':''">
						<text class="icon-xuanzhong iconfont"></text>
						<radio value="1" name="pays" :checked="checkedSelect == 1" />
					</view>
					<image class="pay-ico" :src="staticUrl+'/images/weixinPay.png'" mode="widthFix"></image>
					<view class="radioText">微信支付</view>
				</label>


			</view>
		</view>
		<view class="submitBtn thmeBg" :class="{active:inputNum==''||isIOS}" @click="submits">立即充值</view>

		<showModel v-if='showModal' @cancelFunc='closeModel' type='99' @certain='closeModel' title='充值成功 !' msg='是否继续充值'
			btn3='返回首页' btn2='确定'></showModel>
	</view>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				inputNum: '',
				checkedSelect: 1,
				rechTip: false,
				loading: true,
				RechargeData: '',
				aesid: '',
				aesverifycode: '',
				pay_type: 1,
				showModal: false,
				rechData: '',
				isIOS: false, // 是否ios系统
			}
		},
		onShow() {
			let that = this;

			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				if (extraData.code == 'success') {
					this.showModal = true
				}
			}

		},

		onLoad(e) {

			if (e.inputNum) {
				this.inputNum = e.inputNum
				this.getRechargeAct()
			}
			this.getConfig()
		},
		methods: {
			closeModel() {
				this.showModal = false;
				this.inputNum = ''
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
			},
			// seleceRadio(i) {
			// 	//选择充值支付方式
			// 	this.checkedSelect = i
			// 	if (this.checkedSelect == 1) {
			// 		// #ifdef MP-TOUTIAO
			// 		this.pay_type = 6 // 抖音支付宝
			// 		// #endif
			// 		// #ifdef MP-WEIXIN || H5
			// 		this.pay_type = 1 // 抖音支付宝
			// 		// #endif
			// 	}
			// },
			submits() { //立即充值

				if (this.inputNum == '') {
					return
				}
				uni.showLoading({
					title: "请稍后~~"
				})
				this.$http.post({
					url: '/SRA_memberRecharge/recharge',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						money: this.inputNum,
						aesId: this.aesid,
						aesVerifyCode: this.aesverifycode,
						payType: this.pay_type
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 100) {
						var data = res.data;


						// #ifdef MP-WEIXIN
						if (data.extraData) {
							uni.hideLoading()
							wx.openEmbeddedMiniProgram({
								appId: data.appId,
								extraData: data.extraData
							});
						} else {
							uni.getProvider({
								service: 'oauth',
								success: function(resp) {
									console.log(resp.provider)
									if (resp.provider) {
										uni.requestPayment({
											provider: resp.provider[0],
											orderInfo: data,
											timeStamp: data.timeStamp,
											nonceStr: data.nonceStr,
											package: data.package,
											signType: data.signType,
											paySign: data.paySign,
											success: function(res) {
												this.showModal = true
											},
											fail: function(err) {
												console.log('fail:' + JSON.stringify(err));
												// uni.navigateTo({
												// 	url: '/pages/index/orderList?status=0&clickNav=1'
												// })
											},
											complete: function(res) {
												uni.hideLoading()
											}
										})
									}
								}
							})
						}

						// #endif
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			},
			getRechargeAct() { //获取当前充值金额能有的优惠
				this.loading = true
				setTimeout(() => {
					this.$http.post({
						url: '/SRA_memberRecharge/getRechargeAct',
						data: {
							VeriCode: this.bid,
							vId: this.vid,
							money: this.inputNum,
						}
					}).then(res => {
						if (res.code == 100) {
							this.RechargeData = res.data
							this.loading = false
							this.aesid = this.RechargeData.aesId
							this.aesverifycode = this.RechargeData.aesVerifyCode
						} else {
							uni.showToast({
								icon: "none",
								title: res.notice,
								duration: 2000
							})
						}
					})
				}, 300)
			},
			getConfig() { //获取用户充值配置
				this.$http.post({
					url: '/SRA_memberRecharge/config',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
					}
				}).then(res => {
					if (res.code == 100) {
						this.rechData = res.data
					} else {
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
					}
				})
			}
		},
		computed: {
			...mapState(['color', 'vid', 'bid', 'share'])
		},
		onShareAppMessage(option) {

			return {
				title: this.share.title,
				desc: this.share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=99',
				imageUrl: this.share.imageUrl,
			}
		},
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		color: #333333;
		font-size: 28upx;
	}

	.rechMoney {
		width: 100%;
		height: 240upx;
		background: #FFFFFF;
		border-bottom: 1px solid #e6e6e6;
		padding: 30upx;
		/* margin-bottom: 30upx; */
	}

	.rechNum {
		margin-top: 30upx;
		width: 100%;
	}

	.rechNum text {
		font-size: 40upx;
		line-height: 54upx;
	}

	.rechInput {
		font-size: 60upx;
		border: none;
		background: none;
		outline: none;
		width: 94%;
		float: right;
		height: 64upx;
		margin-top: -8upx;
	}

	.rechNumInput {
		border: none;
		background: none;
		outline: none;
		width: 94%;
		float: right;
		height: 64upx;
		margin-top: -8upx;
	}

	.rechType {
		width: 100%;
		border-bottom: 1px solid #e6e6e6;
		border-top: 1px solid #e6e6e6;
		padding: 30upx;
		background: #FFFFFF;
		padding-right: 0;
		padding-bottom: 0;
	}

	.rechTypeList {
		width: 100%;
		margin-top: 30upx;
	}

	.radio {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 20upx;
	}

	.radio .pay-ico {
		width: 48upx;
		height: 48upx;
		margin: 0 4upx 0 10upx;
	}

	.rechTip {
		text-align: center;
		color: #999999;
		width: 100%;
		margin-top: 30upx;
	}

	.rechTip text {
		color: #FF616C;
		margin: 0 10upx;
	}

	.submitBtn {
		width: calc(100% - 60upx);
		margin: 30upx;
		padding: 30upx 0;
		text-align: center;
		border-radius: 10upx;
		margin-top: 30upx;
		color: #FFFFFF;
	}

	.active {
		background: #DEDEDE !important;
		color: #949494;
	}

	.rechTypeList:last-child .radioText {
		border: none;
	}

	.loadingImg {
		width: 40upx;
		height: 40upx;
	}

	.rule {
		padding-right: 30upx;
		padding-bottom: 30upx;
		border-top: none;
		color: #949494;
	}

	.rechType1 {
		margin-top: 30upx;
	}
</style>